<template>
  <el-dialog :title="title" :visible.sync="$parent.open" width="40%">
    <div v-show="!isshow">
      <el-skeleton :rows="6" animated />
      <el-skeleton :rows="3" animated />
      <el-skeleton :rows="5" animated />
      <el-skeleton :rows="3" animated />
      <el-skeleton :rows="5" animated />
      <el-skeleton :rows="2" animated />
    </div>
    <el-form ref="form" label-position="left" :model="form" inline :rules="rules" label-width="120px" v-show="isshow">
      <div v-for="(item, index) in ValueList" :key="index">
        <el-divider>{{ item.projectDescribe }}</el-divider>
        <!-- 单项选择以及多项选择 -->
        <el-form-item v-if="item.resultType === '1' || item.resultType === '2'" :label="item.projectDescribe + ':'">
          <el-select v-model="item.CheckValue" style="width:217px" placeholder="请选择"
            :multiple="[false, false, true, false, true][item.resultType]" collapse-tags>
            <el-option v-for="(value, i) in item.inspectionProjectResultList" :key="i" :label="value.optionName"
              :value="value.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 单项输入 -->
        <el-form-item v-else-if="item.resultType === '3'" :label="item.projectDescribe + ':'">
          <el-input v-model="item.inputValue" style="width:217px" placeholder="请输入">
          </el-input>
        </el-form-item>
        <!-- 多项输入 -->
        <el-form-item v-else :label="item.projectDescribe + ':'">
          <span v-for="(val, keys) in item.inspectionProjectResultList" :key="keys">
            <el-input v-model="val.inputValue" style="width:217px;margin-bottom: 10px;margin-right: 10px;"
              :placeholder="`请输入${val.optionName}`">
            </el-input>
          </span>
        </el-form-item>
      </div>
      <el-divider></el-divider>

      <el-input type="textarea" :rows="4" placeholder="如有问题反馈,请在此输入信息(包含信息:问题出现时间+问题模块+问题设备+问题简述+问题编号)"
        v-model="form.problemFeedback">
      </el-input>
      <br><br>
      <el-form-item label="巡检人" prop="inspectionUserId" label-width="80px">
        <el-select v-model="form.inspectionUserId" style="width:217px" placeholder="请选择巡检人">
          <el-option v-for="value in userList" :key="value.userId" :label="value.userName" :value="value.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="巡检时间" prop="inspectionDate" label-width="80px">
        <el-date-picker v-model="form.inspectionDate" value-format=" yyyy-MM-dd HH:mm" type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" align="center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="() => $parent.open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getonlineaddList, Updateonline, Createdonline } from "@/api/record/index.js";
import { listUser } from "@/api/system/user.js";
export default {
  props: ['title', 'rowObj'],
  data () {
    return {
      userList: [],
      isshow: false,
      ValueList: [],
      form: {
        "inspectionUserId": "",
        "problemFeedback": "",
        inspectionDate: undefined,
        "recordJsonData": "",
        "presets1": "",
        "presets2": "",
        "presets3": "",
        "presets4": "",
        "presets5": "",
        "presets6": "",
        "presets7": "",
        "presets8": ""
      },
      rules: {
        inspectionUserId: { required: true, message: '必填', trigger: ['blur', 'change'] },
        inspectionDate: { required: true, message: '必填', trigger: ['blur', 'change'] },
      }
    }
  },
  computed: {
    userID () {
      return this.$store.state.user.userId
    }
  },
  mounted () {
    this.form.inspectionUserId = this.userID
    this.init()
  },
  methods: {
    async init () {
      const queryuser = {
        status: '0'//正常
      }
      let { data: user } = await listUser(queryuser)
      this.userList = user
      const params = {
        ascription: '2'//线上
      }
      if (this.title === '修改') {//修改进入
        this.form = { ...this.rowObj }
        this.ValueList = JSON.parse(this.form.recordJsonData)
        // this.realTime = this.form.inspectionDate
        this.form.inspectionDate = this.rowObj.inspectionDate + ' ' + this.rowObj.inspectionTime
      } else {
        let { data: data } = await getonlineaddList(params);
        this.ValueList = data
      }
      this.isshow = true
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.ValueList.forEach((item, index) => {
            if (index >= 8) return false
            if (item.resultType === '1') {
              for (let i = 0; i < item.inspectionProjectResultList.length; i++) {
                const element = item.inspectionProjectResultList[i];
                if (element.id === item.CheckValue) {
                  this.form[`presets${index + 1}`] = element.optionName
                }
              }
            } else if (item.resultType === '2') {
              let Arr = []
              for (let i = 0; i < item.inspectionProjectResultList.length; i++) {
                const element = item.inspectionProjectResultList[i];
                for (let j = 0; j < item.CheckValue.length; j++) {
                  const ele = item.CheckValue[j];
                  if (element.id === ele) {
                    Arr.push(element.optionName)
                  }
                }
              }
              this.form[`presets${index + 1}`] = Arr.join(',')
            } else if (item.resultType === '3') {
              this.form[`presets${index + 1}`] = item.inputValue
            } else {
              this.form[`presets${index + 1}`] = item.inspectionProjectResultList.map(v => {
                return v.optionName + v.inputValue
              }).join(',')
            }
          });
          if (this.title === '修改') {//修改
            let params = {
              ...this.form,
              recordJsonData: JSON.stringify(this.ValueList)
            }
            Updateonline(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.getList()
              }
            })
          } else {//新增
            let params = {
              ...this.form,
              recordJsonData: JSON.stringify(this.ValueList)
            }
            Createdonline(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.handleUpdate()
              }
            })
          }
        }
      });
    },
  }
}
</script>

<style>

</style>